<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2 class="sidebar-title">在线教育平台</h2>
        <el-button icon="el-icon-menu" class="toggle-btn" @click="toggleSidebar"></el-button>
      </div>
      <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          background-color="#0b1b33"
          text-color="#fff"
          active-text-color="#409EFF"
          :collapse="isSidebarCollapse"
          router
      >
        <el-menu-item index="/home">
          <el-icon><Menu class="menu-icon" /></el-icon>
          <span>课程管理</span>
        </el-menu-item>
        <el-menu-item index="/kgfl">
          <el-icon><Folder /></el-icon>
          <span>课程分类管理</span>
        </el-menu-item>
        <el-menu-item index="/stu">
          <el-icon><User /></el-icon>
          <span>学生管理</span>
        </el-menu-item>
        <el-menu-item index="/teacher">
          <el-icon><User /></el-icon>
          <span>教师管理</span>
        </el-menu-item>
        <el-menu-item index="/per">
          <el-icon><User /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主内容区 -->
    <div class="main-content" :class="{ 'sidebar-collapse': isSidebarCollapse }">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">个人信息</h1>
      </div>

      <!-- 个人信息卡片 -->
      <el-card class="personal-info-card">
        <el-form :model="personalInfo" ref="formRef" label-width="120px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="personalInfo.id" />
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="personalInfo.username" disabled />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="personalInfo.email"  />
          </el-form-item>
          <el-form-item label="创建时间" prop="phone">
            <el-input v-model="personalInfo.created_at"  disabled />
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-input v-model="personalInfo.role" disabled />
          </el-form-item>
        </el-form>

         操作按钮
        <div class="button-container">
          <el-button v-if="!state.isEditing" type="primary" @click="startEditing">
            <el-icon><Edit /></el-icon>编辑信息
          </el-button>
          <el-button v-if="state.isEditing" type="success" @click="saveInfo">
            <el-icon><Check /></el-icon>保存信息
          </el-button>
          <el-button v-if="state.isEditing" @click="cancelEditing">
            <el-icon><Close /></el-icon>取消编辑
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
  Menu,
  Folder,
  User,
  Edit,
  Check,
  Close
} from '@element-plus/icons-vue';
import {
  ElMessage,
  ElForm,
  ElCard,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
  ElInput
} from 'element-plus';
import request from "@/utils/request.js";

// 侧边栏相关状态
const isSidebarCollapse = ref(false);
const activeMenu = ref('personal-center');
const toggleSidebar = () => {
  isSidebarCollapse.value = !isSidebarCollapse.value;
};

// 个人中心相关状态
const state = reactive({
  personalInfo: {
    username: '',
    name: '',
    email: '',
    phone: '',
    role: ''
  },
  isEditing: false // 是否处于编辑状态
});

// 表单引用
const formRef = ref(null);
const personalInfo = reactive({
  id: '',
  username: '',
  email:'' ,
  role: '',
  created_at: ''
});
// 获取个人信息
const fetchPersonalInfo = async () => {
  try {
    let item = localStorage.getItem("id");
    const response = await request.get('/users/1');
    personalInfo.id = response.data.id;
    personalInfo.username = response.data.username;
    personalInfo.name = response.data.name;
    personalInfo.email = response.data.email;
    personalInfo.role = response.data.role;
    personalInfo.created_at = response.data.created_at;
    console.log(personalInfo.value)
  } catch (error) {
    ElMessage.error('获取个人信息失败: ' + error.message);
  }
};

onMounted(() => {
  fetchPersonalInfo();
});

// 开始编辑
const startEditing = () => {
  state.isEditing = true;
};

// 取消编辑
const cancelEditing = () => {
  state.isEditing = false;
  fetchPersonalInfo(); // 恢复原始数据
};

// 保存信息
const saveInfo = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await request.put('/api/user/info', state.personalInfo);
        ElMessage.success('信息保存成功');
        state.isEditing = false;
      } catch (error) {
        ElMessage.error('信息保存失败: ' + error.message);
      }
    } else {
      ElMessage.error('请完善表单信息');
    }
  });
};
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  background-color: #0b1b33;
  color: #fff;
  transition: width 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #1f334b;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.toggle-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}

.el-menu-vertical-demo {
  border-right: none;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  transition: margin-left 0.3s ease-in-out;
}

.sidebar-collapse {
  margin-left: 64px; /* 侧边栏折叠后，主内容区调整左边距 */
}

/* 面包屑样式 */
.breadcrumb {
  margin-bottom: 10px;
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

/* 个人信息卡片样式 */
.personal-info-card {
  margin-bottom: 20px;
}

/* 操作按钮样式 */
.button-container {
  margin-top: 20px;
  text-align: right;
}
</style>

<style scoped>
.menu-icon {
  transition: transform 0.3s ease;
}

.el-menu-item:hover .menu-icon {
  transform: rotate(360deg);
}
</style>
